<template>
  <b-list-group>
    <b-list-group-item class="p-2 p-lg-3" v-for="(item,i) in arData" :key="i" @click="toArDetail(item.cid, item.id)">
      <b-badge variant="danger" class="m-1" v-if="item.reader >= hotNum">Hot</b-badge>
      <h3 class="d-inline">{{item.title}}</h3>
      <hr class="m-0"/>
      <p :class="lineli">
        {{item.descr}}
      </p>
      <div class="text-right">
        <b-button-group size="sm">
          <b-button variant="outline-secondary" class="font">
            <b-icon icon="person"></b-icon> {{item.admin}}
          </b-button>
          <b-button variant="outline-secondary">
            <b-icon icon="eye"></b-icon> {{item.reader}}
          </b-button>
          <b-button variant="outline-secondary">
            <b-icon icon="bookmark"></b-icon> {{item.name}}
          </b-button>
          <b-button variant="outline-secondary">
            <b-icon icon="calendar"></b-icon> {{item.create_time}}
          </b-button>
        </b-button-group>
      </div>
    </b-list-group-item>
  </b-list-group>
</template>
<script>
export default {
  name: 'ArList',
  props: {
    data: {}
  },
  data () {
    return {
      lineli: 'line4',
      arData: this.data,
      hotNum: 0
    }
  },
  methods: {
    toArDetail: function (cid, id) {
      if (window.location.href.search('arDetail') === -1) {
      // 如果不在当前页面
        this.$router.push({
          name: 'arDetail',
          params: {
            cid: cid,
            id: id
          }
        })
      } else {
        // 如果在当前页面
        this.$router.push({
          name: 'middle',
          params: {
            cid: cid,
            id: id
          }
        })
      }
      this.addReader(id)
    },
    getArDetail: async function (cid, id) {
      const rst = await this.axios.get('getArDetail/' + cid + '/' + id)
      this.arData = JSON.parse(rst.data.data)
    },
    addReader: function (id) {
      this.axios.get('addArReader/' + id)
    },
    getHotReader: async function () {
      const rst = await this.axios.get('getWebSetting/hotArReader')
      this.hotNum = JSON.parse(rst.data.data)
    }
  },
  created () {
    if (window.location.href.search('arDetail') !== -1) {
      this.lineli = 'line2'
    }
    this.getHotReader()
  },
  watch: {
    data: function (newVal, old) {
      this.arData = newVal
    }
  }
}
</script>

<style scoped>
.line4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}.line2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 }
</style>
